<template>
	<view class="order-detail">
		<NavBar title="订单详情"/>
		<div class="status"> {{ status }} </div>
		<view class="order-info">
			<div class="order-item flex-center">
				<div class="label"> 交货状态 </div>
				<div class="value"> 
					<wd-tag type="primary" mark> {{ orderInfo.fankui }} </wd-tag>
				</div>
			</div>
			<div class="order-item flex-center">
				<div class="label"> 订单号 </div>
				<div class="value">
					<text> {{ orderInfo.supply_order_no }}  </text>
					<wd-icon name="bianjiliebiao" color="#333" @tap="copy(orderInfo.supply_order_no)"/>
				</div>
			</div>
			<div class="order-item flex-center">
				<div class="label"> 下单时间 </div>
				<div class="value"> {{ orderInfo.create_time }} </div>
			</div>
			<template v-if="orderInfo.status != '1'">
				<div class="order-item flex-center">
					<div class="label"> 确认时间 </div>
					<div class="value"> {{ orderInfo.verify_time }} </div>
				</div>
				<div class="order-item flex-center">
					<div class="label"> 确认人 </div>
					<div class="value"> {{ orderInfo.verify_nickname }} </div>
				</div>
			</template>
			<div class="order-goods">
				<div class="title"> 订单商品: </div>
				<div class="goods-list">
					<view class="goods-item th flex-center">
						<view class="name justify-center"> 商品名称 </view>
						<view class="num justify-center"> 商品总数 </view>
						<view class="num2 justify-center"> 备注 </view>
					</view>
					<view class="goods-item flex-center" v-for="item in orderInfo.orderarray" :key="item.sku">
						<view class="name justify-center"> {{ item.name }} </view>
						<view class="num justify-center"> {{ item.quantity }} </view>
						<view class="num2 justify-center"> {{ item.remark }} </view>
					</view>
				</div>
			</div>
		</view>
		<div class="shipped-box">
			<div class="title"> 发货信息 </div>
			<div class="goods-list">
				<view class="goods-item th flex-center">
					<view class="name justify-center"> 商品名称 </view>
					<view class="num justify-center"> 提交数量 </view>
					<div class="express justify-center"> 物流 </div>
					<view class="num2 justify-center"> 状态 </view>
				</view>
				<view class="goods-item flex-center" v-for="item in orderInfo.tijiaoarray" :key="item.sku" v-if="orderInfo.tijiaoarray.length">
					<view class="name justify-center"> {{ item.name }} </view>
					<view class="num justify-center"> {{ item.quantity }} </view>
					<div class="express justify-center"> {{ item.wuliu_name }} </div>
					<view class="num2 justify-center"> {{ item.verify }} </view>
				</view>
				<view class="flex-center" style="line-height: 100rpx;" v-else> 暂未提交数据 </view>
			</div>
		</div>
		<view class="btn-box flex-center">
			<template v-if="orderInfo.status == 1">
				<view class="btn" @tap="confirmOrder(2, '驳回')"> 驳回订单 </view>
				<view class="btn a-btn" @tap="confirmOrder(1, '接收')"> 接收订单 </view>
			</template>
			<template v-if="orderInfo.status == 2 || orderInfo.status == 4">
				<view class="btn" @tap="shipped('part')"> 分批发货 </view>
				<view class="btn a-btn" @tap="shipped('all')" v-if="orderInfo.status == 2"> 全部发货 </view>
			</template>
		</view>
		<wd-message-box />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { useUserStore } from '@/store'
	import { orderDetailApi, confirmOrderApi } from '@/api'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	const userInfo = computed(() => useUserStore().userInfo)
	const message = useMessage()
	const orderInfo = ref({
		create_time: '', // 下单时间
		fankui: '', // 交货状态
		supply_order_no: '', // 订单号
		verify_nickname: '', // 供货商确认人
		verify_time: '', // 确认时间
		orderarray: [], // 订单商品
		tijiaoarray: [], // 提交信息
		status: '', // 订单状态
	})
	const status = computed(() => {
		const { status } = orderInfo.value
		if(status == 1) return '待确认'
		else if(status == 2) return '已确认'
		else if(status == 3) return '已全部发货'
		else if(status == 4) return '已分批发货'
		else if(status == 5) return '已拒绝'
		else return '已完成'
	})
	// 接收、拒绝订单
	const confirmOrder = (status, txt) => {
		message.confirm({title:'提示', msg: `是否${txt}该订单？`}).then(res => {
			const params = {
				status,
				uid: userInfo.value.uid, 
				no: orderInfo.value.supply_order_no,
			}
			confirmOrderApi(params).then(res => {
				uni.showToast({
					icon: 'none',
					title: '已' + txt
				})
				uni.redirectTo({ url: '/pages/order/order?type=0' })
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err?.message
				})
			})
		})
	}
	// 去发货
	const shipped = (type) => {
		uni.navigateTo({
			url: `/pages/order/shipped?type=${type}&order_no=${orderInfo.value.supply_order_no}`
		})
	}
	// 复制
	const copy = (data) => {
		uni.setClipboardData({
			data,
			showToast: false,
			success: () => uni.showToast({ icon: 'none', title: '复制成功' })
		})
	}
	onLoad((e) =>{
		const { order_no } = e
		orderDetailApi('supply/detail', {no: order_no}).then(res => {
			orderInfo.value = res
		})
	})
</script>

<style lang="scss" scoped>
	.order-detail {
		padding: 20rpx 24rpx;
		padding-bottom: 140rpx;
		.status {
			color: #f57351;
			font-size: 35rpx;
			margin-bottom: 30rpx;
		}
		.order-info, .shipped-box {
			padding: 20rpx;
			padding-top: 0;
			border-radius: 20rpx;
			background-color: #fff;
			.order-item {
				line-height: 88rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f8f8f8;
				.value {
					color: #999;
				}
			}
			.order-goods {
				.title {
					font-weight: bold;
					margin: 20rpx 0;
				}
			}
			.goods-list {
				.th {
					background-color: #e5e5e5;
				}
				.goods-item {
					gap: 10rpx;
					text-align: center;
					border: 1px solid #eee;
					padding: 0 10rpx;
					.name, .num, .num2, .express {
						align-items: center;
						min-height: 88rpx;
					}
					.name {
						flex: 1;
						text-align: left;
					}
					.num {
						width: 130rpx;
						border-right: 1px solid #eee;
						border-left: 1px solid #eee;
					}
					.num2 {
						width: 180rpx;
					}
					.express {
						width: 130rpx;
						border-right: 1px solid #eee;
					}
				}
			}
		}
		.shipped-box {
			margin-top: 30rpx;
			padding-top: 20rpx;
			.title {
				font-weight: bold;
				margin-bottom: 20rpx;
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			gap: 30rpx;
			padding: 24rpx;
			background-color: #fff;
			border-top: 1px solid #eee;
			.btn {
				flex: 1;
				line-height: 60rpx;
				text-align: center;
				border: 1px solid #999;
				border-radius: 88rpx;
			}
		}
	}
</style>
